<template>
   <el-dialog :model-value="visible" @close="onClose">
    <div>{{ content }}</div>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onOk">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({ //定义props,接受父组件传递的参数
    visible: { //是否显示
        type: Boolean,
        default: false
    },
    content: { //内容
        type: String,
        default: ''
    }
    
})



//defineEmits 定义事件emits,用于声明可以触发哪些事件
const emit = defineEmits(['ok', 'cancel', 'close']); //定义事件emits,用于触发父组件的事件


//确定按钮点击事件
function onOk() {
  emit('ok');
}

//取消按钮点击事件
function onCancel() {
  emit('cancel');
}

//关闭按钮点击事件
function onClose() {
  emit('close');
}


</script>

<style scoped lang="scss">
</style>
